<template>
    <div class="content">
        <div class="swiper">
            <van-tabs v-model:active="active" swipeable sticky>
                <van-tab v-for="item in tabList" :title="item.tab">
                    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
                        <lazy-component>
                            <div class="one" v-for="(item1, index1) in item.orderList" v-if="item.orderList.length">
                                <div class="name">{{ item1.s_name }}
                                    <van-icon name="arrow" />
                                </div>
                                <div class="time">{{ item1.s_create_time }}</div>
                                <div class="operate" v-if="active == 1">
                                    <van-popover v-model:show="showPopover[index1]" @open="openPopover(index1)"
                                        :actions="actions" @select="onSelect">
                                        <template #reference>
                                            <van-button type="primary" size="mini" @click="finish">已完成</van-button>
                                            <van-button type="primary" size="mini" @click="cancel"
                                                color="linear-gradient(to right, #ff6034, #ee0a24)">退单
                                            </van-button>
                                        </template>
                                    </van-popover>
                                </div>
                                <div class="status">{{ status(item1.ostatus) }}</div>
                                <van-loading type="spinner" color="#1989fa"
                                    style="position:relative ;left:50%;transition:transform(-50%);" v-if="!count" />
                                <div class="small" v-for="item2 in item1.list">
                                    <!-- <lazy-component> -->
                                    <van-card style="font-size: 1rem;" :num="item2.num" :price="item2.m_price"
                                        :desc="item2.m_intro" :title="item2.m_name" :thumb="item2.m_pic"
                                        :lazy-load="true" />
                                    <!-- </lazy-component> -->
                                </div>
                                <div class="total">
                                    <div class="money">￥{{ (item1.total_price * 1).toFixed(2) }}</div>
                                    <div class="sum">共{{ item1.sum }}件</div>
                                    <div class="realid">订单编号:{{ item1.orealid }}</div>
                                </div>
                            </div>
                            <van-empty class="empty"
                                image="https://fastly.jsdelivr.net/npm/@vant/assets/custom-empty-image.png" image-size="80"
                                description="空空如也" v-else />
                        </lazy-component>
                    </van-pull-refresh>
                </van-tab>
            </van-tabs>
            <TabBar />
        </div>
    </div>
</template>
  
<script setup>
import { ref } from 'vue'
import { dateFormat } from '@/utils/time'
const onClickLeft = () => history.back();
const count = ref(false);
const active = ref(1)
const isLoading = ref(false);
const tabList = ref([])
const result = ref(0)
const showPopover = ref([]);
const openIndex = ref();
const actions = [
    { text: '确认', seq: 1 },
    { text: '取消', seq: 0 },
];
const router = useRouter()
const openPopover = (index1) => {
    openIndex.value = index1
}
const onSelect = (action) => {
    if (action.seq == 1) {
        let index = openIndex.value
        if (result.value) {
            //已完成
            tofinish(tabList.value[active.value].orderList[index].oid, 2, index)
        } else {
            //退单
            tofinish(tabList.value[active.value].orderList[index].oid, 3, index)
        }
    }
};
async function tofinish(oid, payload, index) {
    // console.log(oid, payload)
    let date = new Date()
    let obj = {
        oid: oid,
        payload: payload,
        finishtime: dateFormat("YYYY-mm-dd HH:MM:SS", date)
    }
    const { data } = await myUseFetch('/operateorder', { method: 'post', body: obj })
    let res = data.value
    if (res.code == -1) {
        console.log(res)
    } else if (res.code == 0) {
        let temp = tabList.value[active.value].orderList[index]
        temp.ostatus = payload
        tabList.value[payload].orderList.unshift(temp)
        tabList.value[active.value].orderList.splice(index, 1)
    }
}
const finish = () => {
    result.value = 1
}
const cancel = () => {
    result.value = 0
}
const status = ((ostatus) => {
    switch (ostatus) {
        case 0:
            return '未支付'
            break;
        case 1:
            return '待出餐'
            break;
        case 2:
            return '已完成'
            break;
        case 3:
            return '退单'
            break;
    }
})

const loadData = async () => {
    let userInfo = useCookie('userInfo').value
    const { data } = await myUseFetch('/getorderlist', { method: 'post', body: userInfo.uid })
    let ress = data.value
    if (ress.code == -1) {
        console.log(ress)
    } else if (ress.code == 0) {
        //console.log(ress)
        tabList.value.forEach(item => item.orderList = [])
        ress.data.forEach(item => {
            tabList.value[item.ostatus].orderList.push({
                s_name: item.phone,
                s_create_time: item.ocreatetime,
                total_price: item.ototalprice,
                sum: item.sum,
                oid: item.oid,
                orealid: item.orealid,
                ostatus: item.ostatus,
                list: []
            })
        })
        const { data } = await myUseFetch('/getorderlistdetail', { method: 'post', body: userInfo.uid })
        let res = data.value
        if (res.code == -1) {
            console.log(res)
        } else if (res.code == 0) {
            //console.log(res)
            res.data.forEach(item1 => {
                tabList.value[item1.ostatus].orderList.forEach(item2 => {
                    if (item2.oid == item1.odoid) {
                        item2.list.push({
                            m_name: item1.mname,
                            m_intro: item1.mintro,
                            m_pic: item1.mpic,
                            m_price: item1.mprice,
                            num: item1.odmcount
                        })
                    }
                })
            })
            count.value = true;
            isLoading.value = false;
        }
    }
}
tabList.value = [
    {
        tab: "未支付",
        orderList: []
    },
    {
        tab: "进行中",
        orderList: []
    },
    {
        tab: "已完成",
        orderList: []
    },
    {
        tab: "退单",
        orderList: []
    }
]
loadData()
const onRefresh = () => {
    loadData()
};
</script>
  
<style scoped lang="scss">
.content {
    height: 100%;
    min-height: 100vh;
    background-color: rgb(240, 236, 236);
    font-size: 1rem;


    .swiper {
        height: 100%;
        padding-bottom: 5rem;

        .one {
            width: 95%;
            border-radius: 10px;
            margin: 0 auto;
            // height: 6rem;
            margin-top: 0.5rem;
            background-color: #fff;
            position: relative;

            .name {
                font-size: 1rem;
                padding: 8px 12px 0 12px;
                font-weight: bold;
            }

            .time {
                font-size: 0.8rem;
                padding: 0px 12px 0 12px;
            }

            .operate {
                position: absolute;
                z-index: 999;
                top: 0.5rem;
                right: 6rem;
            }

            .status {
                position: absolute;
                z-index: 999;
                top: 0.8rem;
                right: 1rem;
                color: green;
                font-weight: bold;
                font-size: small;
            }

            .small {
                width: 100%;
            }

            .total {
                display: flex;
                flex-direction: row-reverse;
                align-items: center;
                padding: 12px 15px 10px 0;

                .money {
                    font-weight: bold;
                    font-size: 14px;
                }

                .sum {
                    font-size: 0.8rem;
                    margin-right: 5px;
                }

                .realid {
                    font-size: 0.8rem;
                    position: absolute;
                    left: 1rem;
                }
            }
        }

        .empty {
            height: 70vh;
        }
    }
}
</style>